<template>
  <div class="list">
    <div class="el-row">
    <el-col  :span="2">
    <div class="buttons">
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="jump({name: 'collection.manager.add'})"
        v-if="auth('collection.manager.add')"
        size="medium">添加</el-button>
    </div>
    </el-col>
      <!--城市选择-->
      <el-col  :span="22">
      <el-form label-width="80px" :model="form.address_info">
        <el-form-item label="区域">
          <el-select placeholder="请选择省份" @change="getCity" v-model="form.address_info.province.id">
            <template v-for="(item,idx) in province">
              <el-option :label="item.name" :value="item.id" :key="'province' + idx"></el-option>
            </template>
          </el-select>
          <el-select placeholder="请选择城市" v-if="city.length > 0" @change="getCounty" v-model="form.address_info.city.id">
            <template v-for="(item,idx) in city">
              <el-option :label="item.name" :value="item.id" :key="'county' + idx"></el-option>
            </template>
          </el-select>
          <el-select placeholder="请选择区/县" v-if="county.length > 0" v-model="form.address_info.county.id">
            <template v-for="(item,idx) in county">
              <el-option :label="item.name" :value="item.id" :key="'city' + idx"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-form>
      </el-col>
    </div>
    <template>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%">>
        <el-table-column
          label="省市">
          <template slot-scope="scope">
            {{scope.row.province_name}}
          </template>
        </el-table-column>
        <el-table-column
          label="城市">
          <template slot-scope="scope">
            {{scope.row.city_name}}
          </template>
        </el-table-column>
        <el-table-column
          label="区域">
          <template slot-scope="scope">
            {{scope.row.county_name}}
          </template>
        </el-table-column>
        <el-table-column
          label="标题">
          <template slot-scope="scope">
            {{scope.row.title}}
          </template>
        </el-table-column>
        <el-table-column
          label="详细地址">
          <template slot-scope="scope">
            {{scope.row.address}}
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="little"
              @click="jump({
                  name: 'collection.manager.edit',
                  params: {uuid: scope.row.id,data:scope.row}
                })"
              v-if="auth('collection.manager.edit')"
              type="default">编辑</el-button>

            <el-button
              size="little"
              @click="jump({
                  name: 'permission.administrator.update',
                  params: {uuid: scope.row.uuid}
                })"
              v-if="auth('permission.administrator.update')" type="default">编辑</el-button>

            <el-button
              size="little"
              type="danger"
              v-if="auth('collection.manager.delete')"
              @click="deleteUser(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="pages">
      <el-pagination
        @size-change="()=>{}"
        @current-change="currentPage"
        :current-page.sync="page"
        :page-size="size"
        layout="prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      show: false,
      // loading
      loading: false,
      // 页码
      page: 1,
      // 每页显示数量
      size: 50,
      // 数据总条数
      total: 0,
      // 列表数据
      tableData: [],
      province: [],
      city: [],
      county: [],
      form: {
        address_info: {
          province: {
            id: '',
            name: '',
            code: ''
          },
          city: {
            id: '',
            name: '',
            code: ''
          },
          county: {
            id: '',
            name: '',
            code: ''
          }
        }
      }
    }
  },
  watch: {
    $route (route) {
      if (this.$route.params.page) {
        this.page = Number(this.$route.params.page)
      }
      this.getData()
    },
    'form.address_info.province.id' (id) {
      if (id) {
        this.province.map(item => {
          if (item.id === id) {
            this.form.address_info.province.name = item.name
            this.form.address_info.province.code = item.area_code
            this.form.address_info.province.id = item.id
            // 重置
            this.form.address_info.city.name = ''
            this.form.address_info.city.code = ''
            this.form.address_info.city.id = ''
            this.form.address_info.county.name = ''
            this.form.address_info.county.id = ''
            this.form.address_info.county.code = ''
          }
        })
      } else {
        this.form.address_info.province.name = ''
        this.form.address_info.province.code = ''
        this.form.address_info.province.id = ''
      }
      this.searchInfo(
        {province_name: this.form.address_info.province.name,
          page: this.page,
          size: this.size
        }
      )
    },
    'form.address_info.city.id' (id) {
      if (id) {
        this.city.map(item => {
          if (item.id === id) {
            this.form.address_info.city.name = item.name
            this.form.address_info.city.code = item.area_code
            this.form.address_info.city.id = item.id
            // 重置
            this.form.address_info.county.name = ''
            this.form.address_info.county.id = ''
            this.form.address_info.county.code = ''
          }
        })
      } else {
        this.form.address_info.city.name = ''
        this.form.address_info.city.code = ''
        this.form.address_info.city.id = ''
      }
      console.log({province_name: this.form.address_info.province.name,
        city_name: this.form.address_info.city.name,
        page: this.page,
        size: this.size
      })
      this.searchInfo(
        {province_name: this.form.address_info.province.name,
          city_name: this.form.address_info.city.name,
          page: this.page,
          size: this.size
        }
      )
    },
    'form.address_info.county.id' (id) {
      if (id) {
        this.county.map(item => {
          if (item.id === id) {
            this.form.address_info.county.name = item.name
            this.form.address_info.county.id = item.id
            this.form.address_info.county.code = item.area_code
          }
        })
      } else {
        this.form.address_info.county.name = ''
        this.form.address_info.county.id = ''
        this.form.address_info.county.code = ''
      }
      this.searchInfo(
        {province_name: this.form.address_info.province.name,
          city_name: this.form.address_info.city.name,
          county_name: this.form.address_info.county.name,
          page: this.page,
          size: this.size
        }
      )
    }
  },
  methods: {
    // 搜索
    searchInfo (params) {
      this
        .$api
        .map
        .searchInfo(params)
        .then(r => {
          this.tableData = r.list
        })
    },
    /**
     * @purpose 获取所有省份
     */
    getProvince () {
      this
        .$api
        .area
        .item()
        .then(r => {
          this.province = r
        })
    },
    /**
     * @purpose 获取城市
     * @param e
     * @returns {boolean}
     */
    getCity (e) {
      this
        .$api
        .area
        .item(e)
        .then(r => {
          this.city = r
          this.county = []
        })
    },
    /**
     * 区/县
     */
    getCounty (e) {
      this
        .$api
        .area
        .item(e)
        .then(r => {
          this.county = r
        })
    },
    /**
     * 页码改变事件
     */
    currentPage (page) {
      this.jump({
        name: 'collection.manager.items',
        params: {
          page: page
        }
      })
    },
    /**
     * 获取列表数据
     */
    getData () {
      this.loading = true
      this
        .$api
        .map
        .getInfo(this.page, this.size)
        .then(r => {
          console.log(r.list)
          this.loading = false
          this.tableData = r.list
          this.total = r.total
          this.city = []
          this.county = []
          this.form = {
            address_info: {
              province: {
                id: '',
                name: '',
                code: ''
              },
              city: {
                id: '',
                name: '',
                code: ''
              },
              county: {
                id: '',
                name: '',
                code: ''
              }
            }
          }
        })
        .catch(e => {
          this.loading = false
        })
    },
    /**
     * 删除一行数据
     */
    deleteUser (id) {
      this.$confirm('您正在进行危险操作！请确认是否继续删除?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.showLoading()
        this
          .$api
          .map
          .deleteInfo(id)
          .then(r => {
            this.closeLoading()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getData()
          })
      })
    }
  },
  /**
   * 编辑数据
   */
  created () {
    if (this.$route.params.page) {
      this.page = Number(this.$route.params.page)
    }
    this.getProvince()
    this.getData()
  }
}
</script>
<style scoped lang="sass">
  .pages
    margin-top: 1rem
</style>
